<template>
    <div class="qilin-crab">
        <div class="qilin-crab-tab">
            <Tabs :value="currentTab" @on-click="changeTab">
                <TabPane label="单只螃蟹" name="single"></TabPane>
                <TabPane label="套餐螃蟹" name="double"></TabPane>
            </Tabs>
        </div>
        <div class="qilin-crab-table">
            <div class="qilin-crab-table-btn">
                <Button type="primary" size="small" @click="insertData()">新增</Button>
            </div>
            <Table border :data="tableConfig.data" :columns="tableConfig.columns">
                <template slot-scope="scope" slot="action">
                    <Button type="primary" size="small" @click="viewData(scope.row)" style="margin-right:10px;">查看</Button>
                    <Button type="warning" size="small" @click="updateData(scope.row)" style="margin-right:10px;">修改</Button>
                    <Button type="error" size="small" @click="deleteData(scope.row)">删除</Button>
                </template>
            </Table>
            <Page :total="paginationsObj.total" :current="paginationsObj.currentPage" size="small" show-total show-sizer
                :page-size="paginationsObj.pageSize" :page-size-opts="paginationsObj.pageSizes"
                @on-change="changeCurrentPage" @on-page-size-change="changePageSize"
            ></Page>
        </div>
        <Modal v-model="isShow" :title="title" :mask-closable="false" :before-close="handleClose">
            <Form ref="formData" :model="formData" :rules="formDataRule" :label-width="80" v-if="currentTab === 'single' ">
                <Row>
                    <Col span="12">
                        <FormItem label="公母" prop="sex">
                            <Select v-model="formData.sex" @on-change="changeSex">
                                <Option value="公" label="公"></Option>
                                <Option value="母" label="母"></Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="12">
                        <FormItem label="重量/两" prop="weight">
                            <Select v-model="formData.weight">
                                <Option v-for="item in options" :key="item.value" :value="item.value">{{item.label}}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="12">
                        <FormItem label="价格" prop="price">
                            <Input type="number" v-model="formData.price" number></Input>
                        </FormItem>
                    </Col>
                    <Col span="12">
                        <FormItem label="状态" prop="status" class="qilin-form-item-switch">
                            <i-switch v-model="formData.status" size="large">
                                <span slot="open">上架</span>
                                <span slot="close">下架</span>
                            </i-switch>
                        </FormItem>
                    </Col>
                    <Col span="24">
                        <FormItem label="备注" prop="remark">
                            <Input type="textarea" v-model="formData.remark" :rows="3"></Input>
                        </FormItem>
                    </Col>
                </Row>
            </Form>
            <Form ref="formData" :model="formDataDouble" :rules="formDataDoubleRule" :label-width="80" v-else>
                <Row>
                    <Col span="24">
                        <FormItem label="套餐名称" prop="name">
                            <Input type="text" v-model="formDataDouble.name"></Input>
                        </FormItem>
                    </Col>
                    <Col span="24">
                        <FormItem label="套餐内容" prop="content">
                            <Select v-model="formDataDouble.content">
                                <Option v-for="item in combinationOptions" :key="item.value" :value="item.value">{{item.label}}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="12">
                        <FormItem label="价格/元" prop="price">
                            <Input type="number" v-model="formDataDouble.price" number></Input>
                        </FormItem>
                    </Col>
                    <Col span="12">
                        <FormItem label="状态" prop="status" class="qilin-form-item-switch">
                            <i-switch v-model="formDataDouble.status" size="large">
                                <span slot="open">上架</span>
                                <span slot="close">下架</span>
                            </i-switch>
                        </FormItem>
                    </Col>
                    <Col span="24">
                        <FormItem label="图片" prop="picture">
                            <div class="qilin-upload-list" v-for="item in uploadList" :key="item.url">
                                <img :src="item.url">
                                <div class="qilin-upload-list-cover">
                                    <Icon type="ios-eye-outline" @click="viewPicture(item)"></Icon>
                                    <Icon type="ios-trash-outline" @click="deletePicture(item)"></Icon>
                                </div>
                            </div>
                            <Upload ref="upload" :show-upload-list="false" name="file"
                                action="/common/upload" :headers="{
                                    'Authorization':getToken
                                }"
                                :format="['png','jpg','jpeg','gif']" :disabled="disabledUpload"
                                type="drag" :default-file-list="[]" :before-upload="handleBeforeUpload"
                                :on-success="handleSuccess"
                            >
                                <div style="width:80px;height:80px;line-height:80px;text-align:center;">
                                    <Icon type="ios-camera" size="20"></Icon>
                                </div>
                            </Upload>
                        </FormItem>
                    </Col>
                    <Col span="24">
                        <FormItem label="备注" prop="remark">
                            <Input type="textarea" v-model="formDataDouble.remark" :rows="3"></Input>
                        </FormItem>
                    </Col>
                </Row>
            </Form>
            <div slot="footer">
                <Button type="default" size="small" @click="handleClose()">取消</Button>
                <Button type="primary" size="small" @click="submitData">确认</Button>
            </div>
        </Modal>
        <Modal v-model="isShowView" title="查看螃蟹信息" :mask-closable="false" width="600px">
            <QilinView :viewConfig.sync="viewConfig"></QilinView>
            <div slot="footer">
            </div>
        </Modal>
        <Modal v-model="viewPictureConfig.isShow" title="查看螃蟹图片" :mask-closable="false">
            <img :src="uploadImageUrl+viewPictureConfig.src" style="width:100%;max-height:500px;">
        </Modal>
    </div>
</template>
<script>
import { 
    getSingleCrabDataList, 
    getDoubleCrabDataList,
    insertSingleCrabData,
    updateSingleCrabData,
    deleteSingleCrabData,
    insertDoubleCrabData,
    updateDoubleCrabData,
    deleteDoubleCrabData
} from "@/api/index.js";
import QilinView from "@/components/QilinView.vue";
import Qilin from "qilin-utils";
export default {
    inject:["uploadImageUrl"],
    components:{
        QilinView
    },  
    data() {
        return {
            currentTab: "single", //当前tab页
            tableConfig: {
                data: [],
                columns: []
            },
            isShow: false, //是否显示新增修改弹出框
            title: "", //新增修改弹出窗标题名称
            formData: { //新增修改弹出窗表单配置项
                sex: "",
                weight: "",
                price: "",
                status: true,
                remark: "",
            },
            formDataDouble:{ //新增修改弹出窗表单配置项--套餐
                name:"",
                content:"",
                price:"",
                status:true,
                remark:"",
                picture:""
            },
            formDataRule: { //新增修改弹出窗表单校验配置项
                sex: [
                    {
                        required: true,
                        message: "请选择公母",
                        trigger: "change",
                    },
                ],
                weight: [
                    {
                        required: true,
                        message: "请选择重量",
                        trigger: "change",
                    },
                ],
                price: [
                    {
                        required: true,
                        message: "请输入价格",
                        trigger: "blur",
                        type:"number"
                    },
                ],
            },
            formDataDoubleRule:{ //新增修改弹出窗表单校验配置项-套餐
                name:[
                    {
                        required:true,
                        message:"请输入套餐名称",
                        trigger:"blur"
                    }
                ],
                content:[
                    {
                        required:true,
                        message:"请选择套餐内容",
                        trigger:"change"
                    }
                ],
                price:[
                    {
                        required:true,
                        message:"请输入价格",
                        trigger:"blur",
                        type:"number"
                    }
                ]
            },
            maleOptions: [ //公蟹规格选项
                {
                    value: "1",
                    label: "1",
                },
                {
                    value: "1.5",
                    label: "1.5",
                },
                {
                    value: "2",
                    label: "2",
                },
                {
                    value:"2.5",
                    label:"2.5"
                },
                {
                    value: "3",
                    label: "3",
                },
                {
                    value:"3.5",
                    label:"3.5"
                },
                {
                    value: "4",
                    label: "4",
                },
                {
                    value:"4.5",
                    label:"4.5"
                },
                {
                    value: "5",
                    label: "5",
                },
                {
                    value:"5.5",
                    label:"5.5"
                },
                {
                    value: "6",
                    label: "6",
                },
                {
                    value:"6.5",
                    label:"6.5"
                },
                {
                    value: "7",
                    label: "7",
                },
                {
                    value: "8",
                    label: "8",
                },
            ],
            femaleOptions: [ //母蟹规格选项
                {
                    value: "1",
                    label: "1",
                },
                {
                    value:"1.5",
                    label:"1.5"
                },
                {
                    value: "2",
                    label: "2",
                },
                {
                    value:"2.5",
                    label:"2.5"
                },
                {
                    value:"2.8",
                    label:"2.8"
                },
                {
                    value: "3",
                    label: "3",
                },
                {
                    value:"3.5",
                    label:"3.5"
                },
                {
                    value: "4",
                    label: "4",
                },
                {
                    value:"4.5",
                    label:"4.5"
                },
                {
                    value: "5",
                    label: "5",
                },
                {
                    value:"5.5",
                    label:"5.5"
                },
                {
                    value: "6",
                    label: "6",
                }
            ],
            combinationOptions:[
                {
                    value:"2两母*3；3两公*3",
                    label:"2两母*3；3两公*3",
                },
                {
                    value:"2两母*4；3两公*4",
                    label:"2两母*4；3两公*4",
                },
                {
                    value:"2两母*5；3两公*5",
                    label:"2两母*5；3两公*5",
                },
                {
                    value:"2.5两母*3；3.5两公*3",
                    label:"2.5两母*3；3.5两公*3",
                },
                {
                    value:"2.5两母*4；3.5两公*4",
                    label:"2.5两母*4；3.5两公*4",
                },
                {
                    value:"2.5两母*5；3.5两公*5",
                    label:"2.5两母*5；3.5两公*5",
                },
                {
                    value:"2.8两母*3；3.5两公*3",
                    label:"2.8两母*3；3.5两公*3",
                },
                {
                    value:"2.8两母*4；3.5两公*4",
                    label:"2.8两母*4；3.5两公*4",
                },
                {
                    value:"2.8两母*5；3.5两公*5",
                    label:"2.8两母*5；3.5两公*5",
                },
                {
                    value:"3两母*3；4两公*3",
                    label:"3两母*3；4两公*3",
                },
                {
                    value:"3两母*4；4两公*4",
                    label:"3两母*4；4两公*4",
                },
                {
                    value:"3两母*5；4两公*5",
                    label:"3两母*5；4两公*5",
                },
                {
                    value:"3.5两母*3；4.5两公*3",
                    label:"3.5两母*3；4.5两公*3",
                },
                {
                    value:"3.5两母*4；4.5两公*4",
                    label:"3.5两母*4；4.5两公*4",
                },
                {
                    value:"3.5两母*5；4.5两公*5",
                    label:"3.5两母*5；4.5两公*5",
                },
                {
                    value:"3.5两母*3；5两公*3",
                    label:"3.5两母*3；5两公*3",
                },
                {
                    value:"3.5两母*4；5两公*4",
                    label:"3.5两母*4；5两公*4",
                },
                {
                    value:"3.5两母*5；5两公*5",
                    label:"3.5两母*5；5两公*5",
                },
                {
                    value:"4两母*3；5两公*3",
                    label:"4两母*3；5两公*3",
                },
                {
                    value:"4两母*4；5两公*4",
                    label:"4两母*4；5两公*4",
                },
                {
                    value:"4两母*5；5两公*5",
                    label:"4两母*5；5两公*5",
                },
                {
                    value:"5两母*3；5两公*3",
                    label:"5两母*3；5两公*3",
                },
                {
                    value:"5两母*4；5两公*4",
                    label:"5两母*4；5两公*4",
                },
                {
                    value:"5两母*5；5两公*5",
                    label:"5两母*5；5两公*5",
                },
                {
                    value:"5两母*3；6两公*3",
                    label:"5两母*3；6两公*3",
                },
                {
                    value:"5两母*4；6两公*4",
                    label:"5两母*4；6两公*4",
                },
                {
                    value:"5两母*5；6两公*5",
                    label:"5两母*5；6两公*5",
                }
            ],
            options:[], //螃蟹规格下拉选项
            isShowView:false, //是否显示查看提示窗
            viewConfig:{ //查看螃蟹信息配置项
                itemConfig:[],
                viewData:{}
            },
            paginationsObj:{ //分页配置项
                currentPage:1,
                total:0,
                pageSize:10, //当前每页数量
                pageSizes:[10,15,20] //每页显示多少条选项集
            },
            uploadList:[], //已上传的图片数据
            disabledUpload:false, //是否禁止上传
            viewPictureConfig:{ //查看图片显示窗配置项
                isShow:false,
                src:""
            }
        };
    },
    computed:{
        getToken(){
            return Qilin.Storage.getValueLocalStorage("token");
        }
    },
    methods: {
        // 切换tab页签事件监听
        changeTab(name) {
            this.currentTab=name;
            this.getTableData(name);
        },
        // 点击新增按钮事件监听
        insertData() {
            if(this.currentTab === "single"){
                this.options=[];
                this.title="新增单只螃蟹";
            }else{
                this.title="新增套餐螃蟹";  
            };
            this.isShow=true;
            this.$refs["formData"].resetFields();
        },
        // 改变公母选择下拉事件监听
        changeSex(value){
            this.formData.weight="";
            if(value === "公"){
                this.options=this.maleOptions;
            }else{
                this.options=this.femaleOptions;
            };
        },
        // 当弹出窗关闭时事件监听
        handleClose(){
            this.isShow=false;
            this.$refs["formData"].resetFields();
            if(this.currentTab === "single"){
                for(let key in this.formData){
                    this.formData[key]="";
                };
                this.formData.status=true;
            }else if(this.currentTab === "double"){
                for(let key in this.formDataDouble){
                    this.formDataDouble[key]="";
                };
                this.uploadList=[];
                this.formDataDouble.status=true;
            };
        },
        // 点击确定新增按钮事件监听
        submitData(){
            this.$refs["formData"].validate((valid)=>{
                if(valid){
                    if(this.currentTab === "single"){
                        const params={
                            sex:this.formData.sex,
                            weight:this.formData.weight,
                            price:this.formData.price,
                            remark:this.formData.remark,
                            status:this.formData.status ? 1 : 0
                        };
                        if(this.formData.id){ //修改时进入
                            updateSingleCrabData({
                                ...params,
                                id:this.formData.id
                            }).then((res)=>{
                                if(res.code === 200){
                                    this.$Message.success({
                                        background:true,
                                        content:"修改成功"
                                    });
                                    this.getTableData(this.currentTab);
                                    this.handleClose();
                                }else{
                                    this.$Message.error({
                                        background:true,
                                        content:res.msg || "修改失败"
                                    });
                                };
                            });
                        }else{ //新增时进入
                            insertSingleCrabData(params).then((res)=>{
                                if(res.code === 200){
                                    this.$Message.success({
                                        background:true,
                                        content:"新增成功"
                                    });
                                    this.getTableData(this.currentTab);
                                    this.handleClose();
                                }else{
                                    this.$Message.error({
                                        background:true,
                                        content:res.msg || "新增失败"
                                    });
                                };
                            });
                        };
                    }else if(this.currentTab === "double"){
                        const params={
                            name:this.formDataDouble.name,
                            content:this.formDataDouble.content,
                            price:this.formDataDouble.price,
                            status:this.formDataDouble.status ? 1 : 0,
                            picture:this.formDataDouble.picture,
                            remark:this.formDataDouble.remark
                        };
                        if(this.formDataDouble.id){ //修改时进入
                            updateDoubleCrabData({
                                ...params,
                                id:this.formDataDouble.id
                            }).then((res)=>{
                                if(res.code === 200){
                                    this.$Message.success({
                                        background:true,
                                        content:"修改成功"
                                    });
                                    this.getTableData(this.currentTab);
                                    this.handleClose();
                                }else{
                                    this.$Message.error({
                                        background:true,
                                        content:res.msg || "修改失败"
                                    });
                                };
                            });
                        }else{ //新增时进入
                            insertDoubleCrabData(params).then((res)=>{
                                if(res.code === 200){
                                    this.$Message.success({
                                        background:true,
                                        content:"新增成功"
                                    });
                                    this.getTableData(this.currentTab);
                                    this.handleClose();
                                }else{
                                    this.$Message.error({
                                        background:true,
                                        content:res.msg || "新增失败"
                                    });
                                };
                            });
                        };
                    };
                };
            });
        },
        // 图片上传前回调事件监听
        handleBeforeUpload(file){
            if(this.uploadList.length >= 1){
                this.disabledUpload=true;
                return false;
            }else{
                this.disabledUpload=false;
                const imageType=file.name.split(".").pop();
                if(!["jpg","jpeg","png","gif"].includes(imageType)){
                    this.$Message.warning({
                        background:true,
                        content:"请上传图片格式的文件"
                    });
                    return false;
                };
            };
        },
        // 图片上传成功之后的回调事件监听
        handleSuccess(res,file,fileList){
            this.uploadList.push({
                url:res.url,
                name:res.newFileName,
                picture:res.fileName
            });
            this.formDataDouble.picture=res.fileName;
            this.disabledUpload=true;
        },
        // 点击查看图片按钮事件监听
        viewPicture(item){
            console.log(item);
            this.viewPictureConfig.isShow=true;
            this.viewPictureConfig.src=item.picture;
        },
        // 点击删除图片按钮事件监听
        deletePicture(item){
            this.uploadList.splice(0,1);
            this.disabledUpload=false;
            this.formDataDouble.picture="";
        },
        // 点击查看按钮事件监听
        viewData(options) {
            // console.log(options);
            this.isShowView=true;
            if(this.currentTab === "single"){
                this.viewConfig.itemConfig=[
                    {
                        type:"text",
                        label:"公母",
                        value:"sex",
                        col:12
                    },
                    {
                        type:"text",
                        label:"规格/两",
                        value:"weight",
                        col:12
                    },
                    {
                        type:"text",
                        label:"价格/元",
                        value:"price",
                        col:12
                    },
                    {
                        type:"text",
                        label:"状态",
                        value:"status",
                        col:12
                    },
                    {
                        type:"date",
                        label:"创建时间",
                        value:"createTime",
                        col:24
                    },
                    {
                        type:"text",
                        label:"备注",
                        value:"remark",
                        col:24
                    }
                ];
            }else if(this.currentTab === "double"){
                this.viewConfig.itemConfig=[
                    {
                        type:"text",
                        label:"套餐名称",
                        value:"name",
                        col:24
                    },
                    {
                        type:"text",
                        label:"套餐内容",
                        value:"content",
                        col:24
                    },
                    {
                        type:"text",
                        label:"价格/元",
                        value:"price",
                        col:12
                    },
                    {
                        type:"text",
                        label:"状态",
                        value:"status",
                        col:12
                    },
                    {
                        type:"date",
                        label:"创建时间",
                        value:"createTime",
                        col:24
                    },
                    {
                        type:"image",
                        label:"图片",
                        value:"picture",
                        col:24
                    },
                    {
                        type:"text",
                        label:"备注",
                        value:"remark",
                        col:24
                    }
                ];
            };
            this.viewConfig.viewData={
                ...options,
                status:options.status === 1 ? "上架中" : "已下架"
            };
        },
        // 点击修改按钮事件监听
        updateData(options) {
            if(this.currentTab === "single"){
                this.title="修改单只螃蟹信息";
                this.options=options.sex === "公" ? this.maleOptions : this.femaleOptions;
                this.formData={
                    ...options,
                    weight:options.weight+"",
                    status:options.status === 1 ? true : false
                };
            }else if(this.currentTab === "double"){
                this.title="修改套餐螃蟹信息";
                if(options.picture){
                    this.uploadList.push({
                        url:this.uploadImageUrl+options.picture,
                        picture:options.picture,
                        name:""
                    });
                };
                this.formDataDouble={
                    ...options,
                    status:options.status === 1 ? true : false
                };
            };
            this.isShow=true;
            this.$refs["formData"].resetFields();
        },
        // 点击删除按钮事件监听
        deleteData(options) {
            this.$Modal.confirm({
                title:"提示",
                content:"是否确认删除该数据？",
                onOk:()=>{
                    if(this.currentTab === "single"){
                        deleteSingleCrabData([options.id]).then((res)=>{
                            if(res.code === 200){
                                this.$Message.success({
                                    background:true,
                                    content:"删除成功"
                                });
                                this.getTableData(this.currentTab);
                            };
                        });
                    }else if(this.currentTab === "double"){
                        deleteDoubleCrabData([options.id]).then((res)=>{
                            if(res.code === 200){
                                this.$Message.success({
                                    background:true,
                                    content:"删除成功"
                                });
                                this.getTableData(this.currentTab);
                            };
                        });
                    };
                }
            });
        },
        // 监听切换页码事件
        changeCurrentPage(page){
            // console.log(page);
            this.paginationsObj.currentPage=page;
            this.getTableData();
        },
        // 监听切换每页数量事件
        changePageSize(size){
            // console.log(size);
            this.paginationsObj.pageSize=size;
            this.getTableData();
        },
        // 初始化获取单个螃蟹列表数据事件监听
        getTableData(type = this.currentTab) {
            const params={
                pageNum:this.paginationsObj.currentPage,
                pageSize:this.paginationsObj.pageSize
            };
            if (type === "single") {
                this.tableConfig.columns=[
                    {
                        type: "index",
                        width: 80,
                        align: "center",
                        title: "序号",
                    },
                    {
                        title: "公母",
                        key: "sex",
                        align: "center",
                    },
                    {
                        title: "规格/两",
                        key: "weight",
                        align: "center",
                    },
                    {
                        title: "价格/元",
                        key: "price",
                        align: "center",
                    },
                    {
                        title:"状态",
                        key:"status",
                        align:"center",
                        render:(h,options)=>{
                            if(options.row.status === 1){
                                return h("span",{
                                    style:{
                                        color:"#19be6b"
                                    }
                                },"上架中");
                            }else{
                                return h("span",{
                                    style:{
                                        color:"#c5c8ce"
                                    }
                                },"已下架");
                            };
                        }
                    },
                    {
                        title: "创建时间",
                        key: "createTime",
                        align: "center",
                        tooltip: true,
                    },
                    {
                        title: "备注",
                        key: "remark",
                        align: "center",
                    },
                    {
                        title: "操作",
                        fixed: "right",
                        slot: "action",
                        align: "center",
                        width: 250,
                    },
                ];
                getSingleCrabDataList(params).then((res) => {
                    // console.log(res);
                    this.tableConfig.data=res.rows;
                    this.paginationsObj.total=res.total;
                });
            } else if (type === "double") {
                this.tableConfig.columns=[
                    {
                        type: "index",
                        width: 80,
                        align: "center",
                        title: "序号"
                    },
                    {
                        title: "套餐名称",
                        key: "name",
                        align: "center"
                    },
                    {
                        title: "套餐内容",
                        key: "content",
                        align: "center",
                        minWidth:100
                    },
                    {
                        title: "价格/元",
                        key: "price",
                        align: "center"
                    },
                    {
                        title:"状态",
                        key:"status",
                        align:"center",
                        render:(h,options)=>{
                            if(options.row.status === 1){
                                return h("span",{
                                    style:{
                                        color:"#19be6b"
                                    }
                                },"上架中");
                            }else{
                                return h("span",{
                                    style:{
                                        color:"#c5c8ce"
                                    }
                                },"已下架");
                            };
                        }
                    },
                    {
                        title: "创建时间",
                        key: "createTime",
                        align: "center",
                        tooltip: true
                    },
                    {
                        title: "备注",
                        key: "remark",
                        align: "center"
                    },
                    {
                        title: "操作",
                        fixed: "right",
                        slot: "action",
                        align: "center",
                        width: 250
                    }
                ];
                getDoubleCrabDataList(params).then((res) => {
                    this.tableConfig.data=res.rows;
                    this.paginationsObj.total=res.total;
                });
            }
        }
    },
    mounted() {
        this.getTableData();
    },
};
</script>
<style lang="scss" scoped>
.qilin-crab {
    width: 100%;
    height: 100%;
    > .qilin-crab-tab {
        width: 100%;
        background-color: #fff;
        padding: 15px;
        border-radius: 5px;
        margin-bottom: 20px;
    }
    > .qilin-crab-table {
        background-color: #fff;
        padding: 15px;
        border-radius: 5px;
        > .qilin-crab-table-btn {
            text-align: right;
            margin-bottom: 15px;
        }
        >.ivu-page{
            text-align:right;
            margin-top:15px;
        }
    }
}
::v-deep .ivu-form-item-content{
    display: flex;
    flex-flow:row wrap;
}
::v-deep .qilin-form-item-switch{
    >.ivu-form-item-content{
        padding-top:6px;
    }
}
.qilin-upload-list {
  display: inline-block;
  width: 80px;
  height: 80px;
  text-align: center;
  line-height: 80px;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  margin-right: 4px;
}
.qilin-upload-list img {
  width: 100%;
  height: 100%;
}
.qilin-upload-list-cover {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
}
.qilin-upload-list:hover .qilin-upload-list-cover {
  display: block;
}
.qilin-upload-list-cover i {
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  margin: 0 2px;
}
.ivu-upload{
    width:80px;
    display:inline-block;
    display:flex;
    flex-flow:row wrap;
}
</style>